<script setup lang="ts">
import { computed } from "vue";
import * as icons from "@ant-design/icons-vue";

defineOptions({ name:"WebxIcon" });
const props = defineProps({
  /**
   * 图标名称  [图表来源]:图标值
   * antd:xxx
   * iconfont:xxx
   * */
  name:{ type:String, default:"" }
});
const iconObj = computed(() => {
  const [origin="", iconName=""] = props.name?.split(":") || [];
  return { origin, iconName };
});
</script>

<template>
  <div class="webx-icon">
    <component v-if="iconObj.origin === 'antd'" :is="icons[iconObj.iconName]" />
    <i v-else-if="iconObj.origin === 'iconfont'" class="iconfont" :class="'icon-' + iconObj.iconName"></i>
  </div>
</template>

<style lang="less" scoped>
.webx-icon{
  .iconfont{ font-size: inherit; }
}
</style>